<template>
  <div>
    <!-- 头部搜索 -->
    <el-form :inline="true" :model="tableDataS" class="demo-form-inline" ref="tableDataS">
      <el-form-item label="课程名称:" prop="courseName"  >
        <el-input v-model="tableDataS.courseName" placeholder="课程名称:"clearable="true" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(tableDataS)">查询</el-button>
        <el-button @click="resetForm('tableDataS')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border >
      <el-table-column prop="kid" label="序号" width="100px"></el-table-column>

      <el-table-column prop="courseImage" label="图片"   >
        <!--加入下面的内容,scope.row代表这一行,img是显示这一行的哪个字段,我的是img,你的自己看下-->
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" style="width: 100px;height: 50px">
        </template>
      </el-table-column>

      <el-table-column prop="courseName" label="课程名称" width="180"></el-table-column>
      <el-table-column prop="courseType.ctName" label="课程分类"></el-table-column>
      <el-table-column prop="coursePrice,courseVprice" label="价格">
        <template slot-scope="scope">
          <span v-if="scope.row.coursePrice==0">非会员免费</span>
          <span v-else>非会员价:{{scope.row.coursePrice}}<br></span>
          <span v-if="scope.row.courseVprice==0">会员免费</span>
          <span v-else>会员价:{{scope.row.courseVprice}}<br></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="上下架">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="handleChangeStatusId(scope.row,$event)"
            :active-value="1"
            :inactive-value="0"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="下架"
            inactive-text="上架">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="courseType.ctSort" label="排序"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button @click="open(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableDataS.current"
        :page-sizes="[1,10,15,20]"
        :page-size="tableDataS.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataS.total">
      </el-pagination>
    </div>

    <!--  修改弹出层   -->
    <el-dialog title="修改课程" :visible.sync="dialogVisible" width="30%">
      <span>
          <el-form label-width="80px" :model="inquire" ref="inquire">
            <el-form-item label="课程名称:">
              <el-input v-model="inquire.courseName"></el-input>
            </el-form-item>
            <el-form-item label="非会员:"
                          prop="coursePrice"
                          :rules="[{ required: true, message: '价格不能为空'},{ required: true, pattern: /^([0-9]{1,3})$/, message: '请输入正确的价格'}]">
              <el-input v-model="inquire.coursePrice" type="text"></el-input>
            </el-form-item>
             <el-form-item label="会员:"
                           prop="courseVprice"
                           :rules="[{ required: true, message: '价格不能为空'},{ required: true, pattern: /^([0-9]{1,3})$/, message: '请输入正确的价格'}]">
              <el-input v-model="inquire.courseVprice"></el-input>
            </el-form-item>
            <el-form-item label="排序:">
              <el-input-number v-model="inquire.ctSort" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="课程简介:">
              <el-input resize="none"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="inquire.courseJieshao">
              </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(inquire)">查询</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </span>
    </el-dialog>

  </div>
</template>
  <script>
  import  qs from "qs";
  export default {
    data() {
      return {
        ctrl:{
          load:false
        },
        textarea: '',
        num: 1,
        labelPosition: 'right',
        dialogVisible:false,
        valuesTable: true,
        inquire: {
          kid:'',
          courseName:'',
          coursePrice:'',
          ctName:'',
          courseVprice:'',
          ctSort:'',
          courseJieshao:'',
          total:0,
          size:1,
          current:1,
        },
        tableDataS: {
          courseName: '',
          total:0,
          size:1,
          current:1,
        },
        person:{
          courseName:'',
          charge:''
        },
        tableData: [],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      }
    },
    created() {
      this.findAll()
    },
    methods: {
      findAll(){
        this.$axios.post("courriculum-curriculumsTable/jiaoYu/course/inquire",qs.stringify(this.tableDataS)).then(r => {
          this.tableData=r.data.records
          this.tableDataS.total=r.data.total;
          this.tableDataS.total=r.data.total;
        })
      },
      handleChange(value) {
        console.log(value);
      },
      onSubmit() {
        this.findAll()
      },
      resetForm(tableDataS) {
        this.$refs[tableDataS].resetFields();
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.tableDataS.size=val
        this.findAll()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.tableDataS.current=val
        this.findAll()
      },

      submitForm(){
        this.$axios.post("courriculum-curriculumsTable/jiaoYu/course/recompose",qs.stringify(this.inquire)).then(r => {
          if (r.data==1){
            this.$message({
              type:'success',
              message:"修改成功！",
            })
          }
          this.dialogVisible=false;
          this.findAll();
        })
      },
      open(a) {
        this.inquire.courseTypeId=a.courseTypeId
        this.inquire.kid=a.courseType.kid
        this.inquire.ctName=a.courseType.ctName
        this.inquire.kid=a.kid                        //主键
        this.inquire.courseName=a.courseName  //名字
        this.inquire.coursePrice=a.coursePrice//非会员
        this.inquire.courseVprice=a.courseVprice//会员
        this.inquire.ctSort=a.courseType.ctSort//排序
        this.inquire.courseJieshao=a.courseJieshao//课程介绍
        this.dialogVisible=true;
      },
      handleChangeStatusId(kid, status) {

        const title = { 0: '上架', 1: '下架' }
        this.$confirm(`确定要${title[status]}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.changeStatusId(kid.kid,status)

        }).catch(() => {

        })
        this.findAll()
      },
      // 请求更新状态方法
      changeStatusId(kid,status) {
        this.ctrl.load = true
        this.$axios.get(`courriculum-curriculumsTable/jiaoYu/course/status/kid/${kid}/status/${status}`).then(res => {
          this.ctrl.load = false
          if (res.code == 200 && res.data == true) {
            const msg = { 1: '禁用成功', 0: '启用成功' }
            this.$message({
              type: 'success',
              message: msg[status]
            });
            this.findAll()
          } else {
            const msg = { 1: '禁用成功', 0: '启用成功' }
            this.$message({
              type: 'error',
              message: msg[status]
            });
            this.findAll()
          }
        }).catch(() => {
          this.findAll()
          this.ctrl.load = false
        })
      },
    }
  }
  </script>

<style scoped>

</style>
